<template>
  <div class="food-content-box feedback-box">
    <el-breadcrumb separator="/" class="page-title">
      <el-breadcrumb-item :to="{ path: 'feedBackList' }">Feedback</el-breadcrumb-item>
      <el-breadcrumb-item>edit status</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container-padding">
      <el-form label-position="top" size="mini" class="feedback-bottom">
        <el-form-item label="Category">{{categoryName}}</el-form-item>
        <el-form-item label="Type">{{type}}</el-form-item>
        <el-form-item label="Feedback">{{feedback}}</el-form-item>
        <el-form-item label="Photo">
          <div class="photos-box">
            <div v-for="(image,index) in photos" class="photos-list">
              <img  :src="image.photoUrl" :data-src="index" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="Created date">{{dateFormat(createDatetime, 'listedDate')}}</el-form-item>
      </el-form>
      <el-form label-position="top" :model="submitForm" size="mini" ref="submitForm" :rules="rules"
               class="demo-ruleForm main-search-box">
        <el-form-item label="Status" style="width: 200px;margin-right: 10px">
          <el-select style="width: 200px" v-model="submitForm.status" placeholder="">
            <el-option v-for="i in status" :key="i.value" :label="i.text" :value="i.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Notes" prop="notes">
          <el-input
            type="textarea"
            :rows="6"
            :maxlength="4000"
            placeholder="how did you solve the feedback?"
            style="max-width: 30%;"
            v-model="submitForm.notes">
          </el-input>
        </el-form-item>
      </el-form>
      <el-row :gutter="40" type="flex" justify="center" style="padding:40px 0;">
        <el-col :span="6">
          <el-button @click.native="cancelPutForm()" size="medium" style="width:100%">
            {{$t('m.Cancel')}}
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button @click.native="uploadSubmitForm('submitForm')"
                     v-loading.fullscreen.lock="fullscreenLoading" size="medium" type="warning" style="width:100%">
            {{$t('m.Save')}}
          </el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import Qs from 'qs'
  import GoogleMapsLoader from 'google-maps'
  import { uploadFeedbackFormInfo, initFeedback } from '../../api/mgc_api'
  export default {
    name: 'BusStopNew',
    data () {
      return {
        status: [
          {"value": 1, "text": "Active"},
          {"value": 2, "text": "Closed"},
          // {"value": 2, "text": "Suspended"},
        ],
        categoryName: '',
        type: '',
        feedback: '',
        photos: [],
        createDatetime: '',
        submitForm: {
          // 表单数据必填字段
          status: 1,
          notes: '',
        },
        // 添加表单修改数据和字段
        id: '',
        fullscreenLoading: false,
        loading: false,
        rules: {
          status: [
            {required: true, message: 'please select', trigger: 'change'}
          ],
          notes: [
            {required: true, message: 'please enter', trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      // message alert 用于前端错误提示信息
      messageToastErr (msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 1500,
          type: 'error'
        })
      },
      messageToastSuccess (msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 1500,
          type: 'success'
        })
      },
      cancelPutForm () {
        // if (this.id) {
        //   this.initForm()
        // } else {
        //   this.removeAgentForm ('submitForm')
        // }
        this.$router.go(-1)
      },
      dateFormat(value, str) {
        if (!value) return
        var date = new Date(value)
        var Y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        var H = date.getHours()
        var i = date.getMinutes()
        var s = date.getSeconds()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        if (H < 10) {
          H = '0' + H
        }
        if (i < 10) {
          i = '0' + i
        }
        if (s < 10) {
          s = '0' + s
        }
        if (str == 'listedDate') {
          var t = Y + '-' + m + '-' + d + '  ' + H + ':' + i + ':' + s
          return t
        }
        if (str == 'Date') {
          var tDate = d + '-' + m + '-' + Y
          return tDate;
        }
        if (str == 'made') {
          var amOrpm = '';
          if (H > 12) {
            amOrpm = ' pm'
          } else {
            amOrpm = ' am'
          }
          var tMade = d + '-' + m + '-' + Y + '  ' + H + ':' + i + amOrpm
          return tMade;
        }
        else if ('editactivity') {
          var es = Y + '-' + m + '-' + d
          return es
        }
        else {
          var ts = m + '-' + Y
          return ts
        }
      },
      // 表单信息上传
      uploadSubmitForm (submitForm) {
        this.$refs[submitForm].validate((valid) => {
          if (valid){
            console.log(valid)
            // 有id -- 则提交编辑信息
            if (this.id) {
              let formAjaxData = {
                /* 编辑时添加的字段 start */
                id: this.id,
                /* 编辑时添加的字段 end */
                status: this.submitForm.status,
                notes: this.submitForm.notes,
              }
              let params = Qs.stringify(formAjaxData)
              console.log(params, 'params')
              let config = {
                'Content-Type': 'multipart/form-data'
              }
              this.fullscreenLoading = true
              uploadFeedbackFormInfo(params, config)
                .then((res) => {
                  if (res) {
                    if (res.data) {
                      console.log(res)
                      if (res.data.errorID == 0) {
                        this.messageToastSuccess('success')
                        this.initForm()
                        this.$router.push('/feedBackList')
                        this.fullscreenLoading = false
                      }
                    }
                  }
                })
                .catch((error) => {
                  console.log(error)
                  this.fullscreenLoading = false
                  this.messageToastErr('error,please try again leter')
                })
            }
          } else {
            this.messageToastErr('error submit!!')
            return false
          }
        })
      },
      // 初始化 Bus Line 表单
      initForm () {
        this.loading = true
        initFeedback(this.id).then((res) => {
          if (res.data) {
            console.log(res.data)
            this.categoryName = res.data.object.info.categoryName
            this.type = res.data.object.info.typeName
            this.feedback = res.data.object.info.feedbackValue
            this.createDatetime = res.data.object.info.createDatetime
            this.photos = res.data.object.photos
            this.submitForm.status = res.data.object.info.status
            this.submitForm.notes = res.data.object.info.notes
          }
        }).catch((error) => {
          console.log('Error', error.message)
          this.loading = false
          this.messageToastErr('error,please refresh the page later')
        })
      },
    },
    mounted () {
      this.id = this.$route.query.id || ''
      if (this.id) {
        this.initForm()
      }
    }
  }
</script>
<style>
  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px;
  }
  .food-content-box .container-padding {
    padding: 20px 40px 0 40px;
  }
  .list-notes{
    text-align: center;
    display: block;
  }
  .feedback-box .el-form--label-top .el-form-item__label{
    padding: 0;
  }
  .feedback-box .photos-box {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
  }
  .photos-list {
    display: block;
    position: relative;
    width: 99px;
    height: 99px;
    margin-right: 15px;
    margin-bottom: 15px;
    /*border-radius: 5px;*/
    overflow: hidden;
  }
  .photos-list img{
    width:100%;
    height:100%;
  }
  .feedback-bottom {
    border-bottom: 1px solid #eee;
  }
</style>
